<script setup>
import RenderText from './widgets/text.vue'
import RenderTitle from './widgets/title.vue'
import RenderDivider from './widgets/divider.vue'
import RenderInput from './widgets/input.vue'
import RenderRadio from './widgets/radio.vue'
import RenderCheckbox from './widgets/checkbox.vue'
import RenderSelect from './widgets/select.vue'
import RenderSwitch from './widgets/switch.vue'
import RenderInputNumber from './widgets/input-number.vue'
import RenderDatePicker from './widgets/date-picker.vue'
import RenderTimePicker from './widgets/time-picker.vue'
import RenderTimeSelect from './widgets/time-select.vue'
import RenderColorPicker from './widgets/color-picker.vue'
import RenderCascader from './widgets/cascader.vue'

// const { field } = defineProps({
//   field: { type: Object },
// })

const field = defineModel('field')

const componentMap = {
  text: RenderText,
  title: RenderTitle,
  divider: RenderDivider,
  input: RenderInput,
  radio: RenderRadio,
  checkbox: RenderCheckbox,
  select: RenderSelect,
  switch: RenderSwitch,
  inputNumber: RenderInputNumber,
  datePicker: RenderDatePicker,
  timePicker: RenderTimePicker,
  timeSelect: RenderTimeSelect,
  colorPicker: RenderColorPicker,
  cascader: RenderCascader,
}

const componentRender = componentMap[field.value.type]

const noFormItemWraps = ['title', 'text', 'divider']

defineOptions({ name: 'RenderItem' })
</script>

<template>
  <template v-if="noFormItemWraps.includes(field.type)">
    <component
      :is="componentRender"
      v-model:field="field"
    />
  </template>
  <el-form-item
    v-else
    :prop="field.field"
    :label="field.label"
    v-bind="field.formItemProps"
  >
    <component
      :is="componentRender"
      v-model:field="field"
    />
  </el-form-item>
</template>
